/*
 * @Author: xiangxiaojun
 * @Date: 2022-04-19 11:20:25
 * @Descripttion: 小视图
 */
import React, { useEffect, useState } from 'react';
import _ from 'lodash';
import { Typography, Dropdown, Menu, Button } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import Cookies from 'js-cookie';
import { TextWidget } from '@inbiz/react';
import { GlobalRegistry } from '@inbiz/core';
import { getUserAvatarBytoken } from '../services';
import '../style.less';

const prefixCls = 'inbiz-PersonalInfo';
const { Text } = Typography;
const SmallView = (props: any) => {
  const { signOut, editInfo, userInfo, showLang, getLangMessage, langs, random } = props;
  const currentLang = GlobalRegistry.getDesignerLanguage();
  const [langValue, $langValue] = useState(
    langs.find((item) => item.Code == currentLang)?.Name || '简体中文',
  );
  const [isHover, $isHover] = useState(false);
  const avatar = userInfo ? getUserAvatarBytoken(_.get(userInfo, 'IdentityId')) : '';

  const handleClick = ({ item }: any) => {
    getLangMessage(item.props.title);
    $langValue(item.props.name);
  };

  useEffect(() => {
    const locale = Cookies.get('lang') || 'zh-cn';
    const nowLocale = langs.filter((item) => item.Code == locale);
    if (nowLocale.length > 0) {
      $langValue(nowLocale[0].Name);
    }
  }, [langs]);

  const menu = (
    <Menu
      onClick={handleClick}
      items={langs.map((ele, index) => ({
        key: index + 1,
        label: <span title={ele.Name}>{ele.Name}</span>,
        title: ele.Code,
        name: ele.Name,
      }))}
    />
  );

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {showLang && (
        <div
          className={`${prefixCls}-lang`}
          onMouseEnter={() => $isHover(true)}
          onMouseLeave={() => $isHover(false)}
        >
          <Dropdown overlay={menu} overlayClassName={`${prefixCls}-lang-dropdown`}>
            <Button
              type="text"
              style={{
                backgroundColor: isHover ? 'rgba(var(--inbiz-color-primary-toRGB), 0.1)' : '',
                color: isHover ? 'var(--inbiz-color-primary)' : '#666',
              }}
            >
              <InbizIcon
                type="icon-ic-duoyuyan"
                style={{ color: isHover ? 'var(--inbiz-color-primary)' : '#666', fontSize: 16 }}
              />
              <span style={{ width: 55 }}>{langValue}</span>
            </Button>
          </Dropdown>
        </div>
      )}
      <div className={`${prefixCls}-SmallView`}>
        <div
          className={`${prefixCls}-SmallView-ImgHead`}
          onClick={() => {
            editInfo && editInfo();
          }}
        >
          {avatar ? <img className={`${prefixCls}-SmallView-ImgHead-Img`} src={`${avatar}&r=${random}`} /> : null}
        </div>
        <div className={`${prefixCls}-SmallView-box`}>
          <div className={`${prefixCls}-SmallView-name`} title={_.get(userInfo, 'Name')}>
            <Text
              ellipsis
              style={{
                fontSize: 'var(--inbiz-font-size-base)',
                color: 'var(--inbiz-color-heading)',
              }}
            >
              {' '}
              {_.get(userInfo, 'Name')}
            </Text>
          </div>
          <div
            className={`${prefixCls}-SmallView-btn`}
            onClick={() => {
              signOut && signOut();
            }}
          >
            <TextWidget>personalInfo.logOut</TextWidget>
          </div>
        </div>
      </div>
    </div>
  );
};
export default SmallView;
